<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />
    <el-card>
      <div style="display: flex">
        <el-card style="width: 45%" shadow="never" :body-style="{ padding: '5px 10px 5px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">{{ $t(`Print.SelectInstruction`) }}</span>
          </div>
          <Table
            :summaryData="summaryData1"
            summary
            :tableData="LeftTableDate"
            :tableHeader="tableHeader"
            :TableHeight="100"
            :outTableHeight="105"
            @currentRow="clicktogetdata"
            :isLoading="isLoading"
          />
        </el-card>

        <el-card style="width: 30%" shadow="never" :body-style="{ padding: '5px 10px 5px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">{{ $t(`Print.NumberDetails`) }}</span>
          </div>
          <Table
            :summaryData="summaryData"
            summary
            :tableData="ThreeTableData.sizes"
            :tableHeader="tableHeader2"
            :TableHeight="100"
            :outTableHeight="105"
            :isLoading="isLoading1"
          />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '0' }">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div slot="header" class="mb9 f16">
              <span style="font-weight: 600">{{ $t(`Print.ReceivingDetails`) }}</span>
            </div>
            <Table stripe :tableData="ThreeTableData.inDetail" :tableHeader="tableHeader3" :TableHeight="39" :isLoading="isLoading2" />
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div slot="header" class="mb9 f16">
              <span style="font-weight: 600">{{ $t(`Print.IssuingInformation`) }}</span>
            </div>
            <Table stripe :tableData="ThreeTableData.outDetail" :tableHeader="tableHeader4" :TableHeight="39" :isLoading="isLoading3" />
          </el-card>
        </el-card>
      </div>
      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BottomWarehouseWarehousing'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  BottomOrderDataAcquisition,
  NumberDetailsDataInterface,
  DropDownData
} from '@/api/GeneralManager/Factoryinquiry/BottomWarehouseWarehousingKt'
import type {
  BottomOrderParameter,
  list,
  NumberDetailParameter,
  NumberDetailInterface
} from '@/api/GeneralManager/Factoryinquiry/BottomWarehouseWarehousingKt'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '底模',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '部位',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'color',
    color1: '#3FFF38',
    color1Val: '发料结束',
    color2: '#5daeff',
    color2Val: '入库结束'
  }
])

const isLoading = ref(true)

const isLoading1 = ref(true)

const isLoading2 = ref(true)

const isLoading3 = ref(true)

const clicktogetdata = (row: any) => {
  const { lotNo, partName } = row || {}
  NumberQuery.value.lotNo = lotNo
  NumberQuery.value.partName = partName
  isLoading1.value = true
  isLoading2.value = true
  isLoading3.value = true
  NumberDetailData()
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const ObtainDataFromTheDropDownBox = async () => {
  const result = await DropDownData()
  formList.value[3].selectOptions = EvaluatesTheArrayReturnValue(result.moldNos)
  formList.value[4].selectOptions = EvaluatesTheArrayReturnValue(result.parts)
}

const NumberQuery = ref<NumberDetailParameter>({
  lotNo: '',
  partName: ''
})

// 剩余三个表格数据
const ThreeTableData = ref<NumberDetailInterface>({
  inDetail: [],
  outDetail: [],
  sizes: []
})

// 请求号码明细数据
const NumberDetailData = async () => {
  const result = await NumberDetailsDataInterface(NumberQuery.value)
  ThreeTableData.value.inDetail = result.inDetail
  ThreeTableData.value.outDetail = result.outDetail
  ThreeTableData.value.sizes = result.sizes.map((item: any) => {
    if (item.orderQty === item.inQty) {
      item.backgroundColor = '#5daeff'
    }
    if (item.orderQty === item.outQty) {
      item.backgroundColor = '#00FF00'
    }
    return item
  })
  isLoading1.value = false
  isLoading2.value = false
  isLoading3.value = false
  summaryData.value[0].num = result.sizes.reduce((item: any, _index) => {
    item += _index.orderQty
    return item
  }, 0)

  summaryData.value[1].num = result.sizes.reduce((item: any, _index) => {
    item += _index.inQty
    return item
  }, 0)

  summaryData.value[2].num = result.sizes.reduce((item: any, _index) => {
    item += _index.mainShortQty
    return item
  }, 0)

  summaryData.value[3].num = result.sizes.reduce((item: any, _index) => {
    item += _index.preShortQty
    return item
  }, 0)

  summaryData.value[4].num = result.sizes.reduce((item: any, _index) => {
    item += _index.outQty
    return item
  }, 0)

  summaryData.value[5].num = result.sizes.reduce((item: any, _index) => {
    item += _index.outShortQty
    return item
  }, 0)

  summaryData.value[6].num = result.sizes.reduce((item: any, _index) => {
    item += _index.stockQty
    return item
  }, 0)
  // result.sizes.map((item, index) => {
  //   Object.keys(item).forEach((item1) => {
  //     console.log(item1)
  //     if (item1 === 'cfmFlag') {
  //       item['backgroundColor3'] = item[item1] as any
  //     }
  //   })
  // })
  color1()
}

// 请求底仓指令查询数据
const BottomOrderData = ref<BottomOrderParameter>({
  color: '',
  lotNo: '',
  moldNo: '',
  pageNum: 1,
  pageSize: 40,
  partName: '',
  style: ''
})

// 指令左侧表格数据
const LeftTableDate = ref<list[]>()

const ConsumableTableData = async () => {
  isLoading.value = true
  const result = await BottomOrderDataAcquisition(BottomOrderData.value)
  total.value = result.total
  LeftTableDate.value = result.list
  summaryData1.value[0].num = result.stockTotal
  isLoading.value = false
  const { lotNo, partName } = result.list[0] || {}
  NumberQuery.value.lotNo = lotNo
  NumberQuery.value.partName = partName
  if (result.list.length !== 0) {
    NumberDetailData()
  }
}

const interAceFunct = () => {
  // 耗品入库查询
  ConsumableTableData()

  // 下拉框数据
  ObtainDataFromTheDropDownBox()
}

// 计算金额总数
const summaryData1 = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  }
])

const summaryData = ref<summaryDataType[]>([
  {
    index: 1,
    num: 0
  },
  {
    index: 2,
    num: 0
  },
  {
    index: 3,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: 0
  },
  {
    index: 6,
    num: 0
  },
  {
    index: 7,
    num: 0
  }
])

interface summaryDataType {
  index: number
  num: number | undefined
}

onMounted(() => {
  interAceFunct()
})

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '库存数量',
    prop: 'stockQty'
  },
  {
    label: '底模',
    prop: 'moldNo'
  },
  {
    label: '入库欠',
    prop: 'inShort',
    width: '55'
  },
  {
    label: '发料欠',
    prop: 'outShort',
    width: '55'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  }
])

const color1 = () => {
  if (ThreeTableData.value.sizes.length !== 0) {
    ThreeTableData.value.sizes.map((item) => {
      if (item.cfmFlag === 'Y') {
        item.backgroundColor = '#3FFF38'
        tableHeader2.value[0].backgroundColor = '#3FFF38'
      }
      if (item.cfmFlag === 'N') {
        item.backgroundColor = ''
        return
      }
    })
  }
}

const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'sizeNo',
    width: '60',
    backgroundColor: true
  },
  {
    label: '订单数量',
    prop: 'orderQty',
    width: '60'
  },
  {
    label: '已入数量',
    prop: 'inQty',
    width: '60'
  },
  {
    label: '正单欠数',
    prop: 'mainShortQty',
    width: '60'
  },
  {
    label: '预补欠数',
    prop: 'preShortQty',
    width: '60'
  },
  {
    label: '已发数量',
    prop: 'outQty',
    width: '60'
  },
  {
    label: '发料欠数',
    prop: 'outShortQty',
    width: '60'
  },
  {
    label: '库存数量',
    prop: 'stockQty',
    width: '55   '
  }
]) as any

const tableHeader3 = ref([
  {
    label: '入货厂商',
    prop: 'deptName'
  },
  {
    label: '入货日期',
    prop: 'slipDate'
  },
  {
    label: '入货数量',
    prop: 'qty'
  },
  {
    label: '操作员',
    prop: 'operator'
  }
])

const tableHeader4 = ref([
  {
    label: '领用部门',
    prop: 'deptName'
  },
  {
    label: '领用日期',
    prop: 'slipDate'
  },
  {
    label: '领用数量',
    prop: 'qty'
  },
  {
    label: '操作员',
    prop: 'operator'
  }
])

// 分页器
const total = ref(0)

const handleSizeChange = (val: number) => {
  BottomOrderData.value.pageNum = val
  ConsumableTableData()
}

const handleCurrentChange = (val: number) => {
  BottomOrderData.value.pageSize = val
  ConsumableTableData()
}

const Launchform = (val: any) => {
  BottomOrderData.value.lotNo = val[0].inputValue
  BottomOrderData.value.style = val[1].inputValue
  BottomOrderData.value.color = val[2].inputValue
  BottomOrderData.value.moldNo = val[3].selectValue
  BottomOrderData.value.partName = val[4].selectValue
  ConsumableTableData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
.lastCard {
}
</style>
